<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel='stylesheet' href="../css/index.css">		
	<link rel='stylesheet' href="../css/v-directory.css">	
	<script src="../js/libs/jquery.js" type="text/javascript"></script>
	<script type="text/javascript" src="../js/view/function.js"></script>
	<script type="text/javascript" src="../js/view/v-directory.js"></script>
	<script type="text/javascript" src="../js/plugins/niceScroll/js/jquery.nicescroll.js"></script>
</head>
<script type="text/javascript">
	$(function(){
		$(".org").niceScroll({
	        cursorcolor:"#0099ff",
	        autohidemode:false,
	        railalign:"right",
	        railoffset:"left",

	    });
	    $(".selected").niceScroll({
	        cursorcolor:"#0099ff",
	        autohidemode:false,
	        railalign:"right",
	        railoffset:"left",

	    });
	    $(".sc").niceScroll({
	        cursorcolor:"#0099ff",
	        autohidemode:false,
	        railalign:"right",
	        railoffset:"left",

	    });
	    if($(".org li").width()<$(".left").width()){

	      $(".org li").css("min-width",$(".left").width());
	    }
	    $("ul.di-n").css("display","none");

	})
	
</script>
<body class="bgwhite">
<div class="r-Panel">
	<div class="createDirectory po-ab w670 right createD di-n">
		<div class="head">
			<div class="border-b" style="height:45px;">
				<span class="dis-in ml-40 pt-20 pb-6 title">创建计算机目录</span>
				<span class="dis-in f-r pt-20 close" style="padding-right:12px;"><img src="../image/icon/close.png"></span>
			</div>
			<div class="h75 lh-75">
				<div class="tableframe po-re" style="width:80%;margin:40px auto 0 auto;">			
					<div class="tableFrameTr fs-14 color6787ab ft-b">
						<div class="td t-a-c w-22">填写目录名称</div>
						<div class="td t-a-c w-22">分配交付组</div>
						<div class="td t-a-c w-22">选择规格配置</div>
						<div class="td t-a-c w-22">选择外网IP段</div>
					</div>
					<div class="tableFrameTr">
						<div class="td finished w-22"></div>
						<div class="td finished w-22"></div>
						<div class="td unfinished w-22"></div>
						<div class="td unfinished w-22"></div>
					</div>
					<div class="line po-ab">						
						<div class="unfinishline" style="width:105px"></div>
						<div class="unfinishline" style="width:100px"></div>
						<div class="unfinishline" style="width:105px;margin-right:0"></div>
					</div>
					<div class="lineFinishGroup po-ab">
						<div class="finishline" style="width:70px"></div>						
					</div>
				</div>
			</div>
		</div>
		<div class="directory-content">
			<div class="h75 lh-75">
				<span class="dis-in mr-10 ml-60 t-a-r">目录名称</span>
				<span class="dis-in pl-10 pr-10 input bordere4edf0 h34 lh-34 w420"><input type="text" style="width:90%"></span></div>
				<span class="di-b color6787ab" style="margin-left:125px;margin-top:-10px">该名称即分配给员工计算机的名称</span>
				<div class="h75 lh-75">
					<div class="mr-10 ml-60 w55 t-a-r f-l">数量</div>
					<div class="f-l" style="height:100%">
						<div class="pl-10 pr-10 input bordere4edf0 h34 lh-34 w170 f-l po-re" style="top:50%;margin-top: -17px"><input type="text" value="1" style="width:95%" class="sum t-a-r"></div>
					</div>
					<div class="f-l ml-10" style="height:100%">
						<div class="count t-a-c bordere4edf0 f-l po-re plus" style="top:50%;margin-top: -10px;line-height: 20px"></div>
					</div>
					<div class="f-l ml-10" style="height:100%">
						<div class="count t-a-c bordere4edf0 f-l po-re subs" style="top:50%;margin-top: -10px;line-height: 20px"></div>
					</div>
				</div>
			</div>				
			<div class="ok_btn">
				<div class="pre mr-10 v-hidden border">
					上一步
				</div>
				<div class="next bg0099ff colorwhite">
					下一步
				</div>
			</div>	
		</div>

		<div class="createDistribute po-ab w670 di-n right createD">
			<div class="head">
				<div class="border-b" style="height:45px;">
					<span class="dis-in ml-40 pt-20 pb-6 title">创建计算机目录</span>
					<span class="dis-in f-r pt-20 close" style="padding-right:12px;"><img src="../image/icon/close.png"></span>
				</div>
				<div class="h75 lh-75 l1">
					<div class="tableframe po-re" style="width:80%;margin:40px auto 0 auto;">			
						<div class="tableFrameTr fs-14 color6787ab ft-b">
							<div class="td t-a-c w-22">填写目录名称</div>
							<div class="td t-a-c w-22">分配交付组</div>
							<div class="td t-a-c w-22">选择规格配置</div>
							<div class="td t-a-c w-22">选择外网IP段</div>
						</div>
						<div class="tableFrameTr">
							<div class="td finished w-22"></div>
							<div class="td finished w-22"></div>
							<div class="td unfinished w-22"></div>
							<div class="td unfinished w-22"></div>
						</div>
						<div class="line po-ab">						
							<div class="unfinishline" style="width:105px"></div>
							<div class="unfinishline" style="width:100px"></div>
							<div class="unfinishline" style="width:105px;margin-right:0"></div>
						</div>
						<div class="lineFinishGroup po-ab">
							<div class="finishline" style="width:180px"></div>						
						</div>
					</div>
				</div>
			</div>
			<div class="directory-content">
				<div class="h75 lh-75 l2" style="width:60%;margin:0 auto 0 auto;">
					
					<div class="f-l ml-60 mr-10" style="height:100%">
						<div class="radio radiounselect"></div>
					</div>
					
					<div class="f-l mr-20 h75 lh-75 mr-20">分配至新交付组</div>
					
					<div class="f-l mr-10 ml-10" style="height:100%">
						<div class="radio radiounselect"></div>
					</div>
					
					<div class="f-l pr-10 h75 lh-75">分配至已有交付组</div>
				</div>
				<div class="h75 lh-75">
					<span class="dis-in mr-10 ml-60">交付组组名</span>
					<span class="dis-in pl-10 pr-10 input bordere4edf0 h34 lh-34 w420"><input type="text" style="width:90%"></span></div>
			<div class="ml-60 mr-20 po-ab distributePanel">
				<div class="left f-l po-re t1">
					<div class="h34 lh-34 bgf1f6f9 w-100 ">
						<div class="ml-20 color6787ab">产品组织</div>
					</div>
					<div class="input bordere4edf0 w-90 h34 lh-34 mg-auto mt-10 pl-5">
						<input type="text" style="width:80%;" placeholder="输入关键字搜索">
						<div class="zoom bgst"></div>
					</div>
					<div class="addD"><!-- <img src="../image/icon/addD.png"> --></div>
					<!-- <div class="hoverBg bgf1f6f9 di-n"> -->
					<div class="org po-re" >					
						<ul>
							<li><span class="arrow-r">财务部</span><label class="addD"></label></li>
						</ul>
						<ul>
							<li><span class="arrow-r">生产部</span><label class="addD"></label></li>
							<li>
								<ul class="di-n">
									<li><span>生产一部</span><label class="addD"></label></li>
									<li><span class="arrow-r">生产二部</span><label class="addD"></label></li>
									<li style="height:0">
										<ul class="di-n">
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
										</ul>
									</li>
									<li><span>生产w部</span><label class="addD"></label></li>
									<li><span class="arrow-r">生产二部</span><label class="addD"></label></li>
									<li>
										<ul class="di-n">
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
										</ul>
									</li>
									</ul>
								</li>
							
						</ul>
					</div>
				</div>
				<div class="mid f-l">
					<div class="move bgst h34 mt-10 ml-10"></div>
				</div>
				<div class="right f-l">
					<div class="h34 lh-34 bgf1f6f9 w-100">
						<div class="ml-20 color6787ab">已选<span class="color0099ff cot">3</span>人</div>
					</div>
					<div class="selected">
						<ul></ul>
					</div>
				</div>
			</div>
			</div>

			<div class="ok_btn">
				<div class="pre mr-10 border">
					上一步
				</div>
				<div class="next bg0099ff colorwhite">
					下一步
				</div>
			</div>			
		</div>

	<div class="createConfig po-ab w670 di-n right createD">
			<div class="border-b" style="height:45px;">
				<span class="dis-in ml-40 pt-20 pb-6 title">创建计算机目录</span>
				<span class="dis-in f-r pt-20 close" style="padding-right:12px;"><img src="../image/icon/close.png"></span>
			</div>
			<div class="h75 lh-75">
				<div class="tableframe po-re" style="width:80%;margin:40px auto 0 auto;">			
					<div class="tableFrameTr fs-14 color6787ab ft-b">
						<div class="td t-a-c w-22">填写目录名称</div>
						<div class="td t-a-c w-22">分配交付组</div>
						<div class="td t-a-c w-22">选择规格配置</div>
						<div class="td t-a-c w-22">选择外网IP段</div>
					</div>
					<div class="tableFrameTr">
						<div class="td finished w-22"></div>
						<div class="td finished w-22"></div>
						<div class="td finished w-22"></div>
						<div class="td unfinished w-22"></div>
					</div>
					<div class="line po-ab">						
						<div class="unfinishline" style="width:105px"></div>
						<div class="unfinishline" style="width:100px"></div>
						<div class="unfinishline" style="width:105px;margin-right:0"></div>
					</div>
					<div class="lineFinishGroup po-ab">
						<div class="finishline" style="width:300px"></div>						
					</div>
				</div>
			</div>
			<div class="h75 lh-75 po-re" style="width:80%;margin:0 auto 0 auto;">
				
				<div class="f-l ml-60 mr-10" style="height:100%">
					<div class="radio radiounselect"></div>
				</div>
				
				<div class="f-l h75 lh-75">镜像</div>
				<div class="f-l ml-10">
					<div class="bo-ra-5 w140 po-ab bordere4edf0 pl-10 bgwhite color344c50 sel cu-p" style="top:20px;line-height: 0">
						<ul>
							<li class="h34 lh-34 selectArrow bgst pm" style="background-position: 110px 10px">请选择</li>		
							<li class="h34 lh-34 di-n">win7</li>		
							<li class="h34 lh-34 di-n">xp</li>	
						</ul>
					</div>
				</div>
				<div class="f-l mr-10 ml-10" style="height:100%;margin-left: 180px">
					<div class="radio radiounselect"></div>
				</div>
				
				<div class="f-l pr-10 h75 lh-75">快照</div>
				<div class="f-l ml-10">
				<div class="bo-ra-5 w140 po-ab bordere4edf0 pl-10 bgwhite color344c50 sel cu-p" style="top:20px;left:350px;line-height: 0">
						<ul>
							<li class="h34 lh-34 selectArrow bgst pm" style="background-position: 110px 10px">请选择</li>		
							<li class="h34 lh-34 di-n">win7</li>		
							<li class="h34 lh-34 di-n">xp</li>	
						</ul>
					</div>
					</div>
			</div>
			<div class="h75 lh-75 config">
				<label class="dis-in mr-10 ml-60">CPU</label>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c">1核</span>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c">2核</span>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c">4核</span>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c">8核</span>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c">32核</span>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c"><input type="text" style="width:70%" placeholder="自定义" class="color0099ff"></span>核
			</div>
			<div class="h75 lh-75 config">
				<label class="dis-in mr-10 ml-60">内存</label>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c">512MB</span>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c">1024MB</span>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c">2048MB</span>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c">4096MB</span>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c">8192MB</span>
				<span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c"><input type="text" style="width:70%" placeholder="自定义" class="color0099ff"></span>MB
			</div>
			<div class="h75 lh-75 config ml-60">
				<div class="f-l mr-20">
					<label class="mr-10">硬盘</label>
				</div>
				<div class="dragFrame f-l" style="width:400px;margin-right: 17px">
				    <div class="circle"></div>
				    <div class="text">0</div>
<!-- 				    <div class="text">50</div>
 -->				<div class="text">300</div>
 					<div class="dragFrame po-ab bg0099ff loaded" style="width:0px;top:-30px"></div>
				</div>					
				<div class="f-l dragPosition"><span class="dis-in bo-ra-5 w70 ml-10 h34 lh-34 bordere4edf0 t-a-c"><input type="text" style="width:70%" placeholder="自定义" class="color0099ff"></span>MB</div>
				
			</div>
	
			<div class="ok_btn">
				<div class="pre mr-10 border">
					上一步
				</div>
				<div class="next bg0099ff colorwhite">
					下一步
				</div>
			</div>			
		</div>
	
	<div class="createIP po-ab w670 di-n right createD">
		<div class="head">
			<div class="border-b" style="height:45px;">
				<span class="dis-in ml-40 pt-20 pb-6 title">创建计算机目录</span>
				<span class="dis-in f-r pt-20 close" style="padding-right:12px;"><img src="../image/icon/close.png"></span>
			</div>
			<div class="h75 lh-75">
				<div class="tableframe po-re" style="width:80%;margin:40px auto 0 auto;">			
					<div class="tableFrameTr fs-14 color6787ab ft-b">
						<div class="td t-a-c w-22">填写目录名称</div>
						<div class="td t-a-c w-22">分配交付组</div>
						<div class="td t-a-c w-22">选择规格配置</div>
						<div class="td t-a-c w-22">选择外网IP段</div>
					</div>
					<div class="tableFrameTr">
						<div class="td finished w-22"></div>
						<div class="td finished w-22"></div>
						<div class="td finished w-22"></div>
						<div class="td finished w-22"></div>
					</div>
					<div class="line po-ab">						
						<div class="unfinishline" style="width:105px"></div>
						<div class="unfinishline" style="width:100px"></div>
						<div class="unfinishline" style="width:101px;margin-right:0"></div>
					</div>
					<div class="lineFinishGroup po-ab">
						<div class="finishline" style="width:355px"></div>						
					</div>
				</div>
			</div>
		</div>
		<div class="directory-content sc">
			<div class="mt-10 ml-60">				
				<label class="dis-in mr-10 color6787ab h34 lh-34">外网IP段</label>
				<ul>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					<li class="h34 lh-34"><div class="f-l mr-10" style="height:100%;"><label class="dis-in radio radiounselect"></label></div>192.168.0.254/20</li>
					
				</ul>
			</div>
		</div>
			<div class="ok_btn">
				<div class="pre mr-10 border">
					上一步
				</div>
				<div class="next bg0099ff colorwhite complete">
					完成
				</div>
			</div>			
		</div>
		<div class="addVitual po-ab w670 di-n right createD">
			<div class="head">
				<div class="border-b" style="height:45px;">
					<span class="dis-in ml-40 pt-20 pb-6 title">添加虚拟机</span>
					<span class="dis-in f-r pt-20 close" style="padding-right:12px;"><img src="../image/icon/close.png"></span>
				</div>
			</div>
			<div class="directory-content ml-40">
				<div class="h75 lh-75">
					<div class="ft-b">当前目录信息</div>
				</div>
					<div class="mg-auto directory-table" style="width:70%;">
						<div class="f-l mr-20">
							<label class="dis-in mr-20">目录名称</label>
							<label class="dis-in">目录名称</label>
						</div>
						<div class="f-r">
							<label class="dis-in mr-20">目录名称</label>
							<label class="dis-in">目录名称</label>
						</div>
						<div class="cl"></div>
						<div class="f-l mr-20">
							<label class="dis-in mr-20">目录名称</label>
							<label class="dis-in">目录名称</label>
						</div>
						<div class="f-r">
							<label class="dis-in mr-20">目录名称</label>
							<label class="dis-in">目录名称</label>
						</div>
						<div class="cl"></div>
						<div class="f-l mr-20">
							<label class="dis-in mr-20">目录名称</label>
							<label class="dis-in">目录名称</label>
						</div>
						<div class="f-r">
							<label class="dis-in mr-20">目录名称</label>
							<label class="dis-in">目录名称</label>
						</div>
						<div class="cl"></div>
						<div class="f-l mr-20">
							<label class="dis-in mr-20">目录名称</label>
							<label class="dis-in">目录名称</label>
						</div>
						<div class="f-r">
							<label class="dis-in mr-20">目录名称</label>
							<label class="dis-in">目录名称</label>
						</div>
						<div class="cl"></div>
					</div>					
				
				
			<div class="ml-60 mr-20 po-ab distributePanel f-l">
				<div class="left f-l po-re t1">
					<div class="h34 lh-34 bgf1f6f9 w-100 ">
						<div class="ml-20 color6787ab">产品组织</div>
					</div>
					<div class="input bordere4edf0 w-90 h34 lh-34 mg-auto mt-10 pl-5">
						<input type="text" style="width:80%;" placeholder="输入关键字搜索">
						<div class="zoom bgst"></div>
					</div>
					<div class="addD"><!-- <img src="../image/icon/addD.png"> -->
					 </div>
					
					<div class="org po-re" >					
						<ul>
							<li><span class="arrow-r">财务部</span><label class="addD"></label></li>
						</ul>
						<ul>
							<li><span class="arrow-r">生产部</span><label class="addD"></label></li>
							<li>
								<ul class="di-n">
									<li><span>生产一部</span><label class="addD"></label></li>
									<li><span class="arrow-r">生产二部</span><label class="addD"></label></li>
									<li style="height:0">
										<ul class="di-n">
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
										</ul>
									</li>
									<li><span>生产w部</span><label class="addD"></label></li>
									<li><span class="arrow-r">生产二部</span><label class="addD"></label></li>
									<li>
										<ul class="di-n">
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
											<li><span class="arrow-r">生产三部生产三部生产三三部生产三生产三</span><label class="addD"></label></li>
										</ul>
									</li>
									</ul>
								</li>
							
						</ul>
					</div>
				</div>
				<div class="mid f-l">
					<div class="move bgst h34 mt-10 ml-10"></div>
				</div>
				<div class="right f-l">
					<div class="h34 lh-34 bgf1f6f9 w-100">
						<div class="ml-20 color6787ab">已选<span class="color0099ff cot">3</span>人</div>
					</div>
					<div class="selected">
						<ul></ul>
					</div>
				</div>
				<div class="cl"></div>
			</div>
			</div>

			<div class="ok_btn">
				<div class="pre mr-10 border v-hidden">
					上一步
				</div>
				<div class="next bg0099ff colorwhite v-hidden">
					下一步
				</div>
			</div>	 		
		</div>
	</div>
</body>
</html>